<template>
  <t-tabs  size="medium" v-model="stepValue">
    <t-tab-panel :class="[reviewOpen?'tab-full-panel':'tab-panel']"  value="1" label="基本信息">
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
      <t-card class="step-card" size="small" title="基本信息">
        <t-form :colon="true" ref="form" class="step-form"
                labelWidth="150px">
          <t-form-item label="科技示范工程名称">
            {{ objData.projectName }}
          </t-form-item>
          <t-form-item label="科技示范工程负责人">
            {{ projectData.projectLeader.name }}
          </t-form-item>
          <t-form-item label="第一承担单位">
            {{ projectData.declareDeptName }}
          </t-form-item>
          <t-form-item label="推荐单位">
            {{ projectData.manageDeptName }}
          </t-form-item>
          <t-form-item label="实施开始日期" name="startDate">
            {{ objData.startDate }}
          </t-form-item>
          <t-form-item label="实施截止日期" name="endDate">
            {{ objData.endDate }}
          </t-form-item>
          <t-form-item label="填写日期" name="compileDate">
            {{ objData.compileDate }}
          </t-form-item>
        </t-form>
      </t-card>
        </t-col>
      </t-row>
    </t-tab-panel>
    <t-tab-panel :class="[reviewOpen?'tab-full-panel':'tab-panel']"  value="2" label="概述">
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
      <t-card class="step-card" size="small" title="(1)依托工程(项目)概述">
<!--        <div v-html="objData.embodimentSummarize.summarize"></div>-->
        <inner-html :content="objData.embodimentSummarize.summarize"></inner-html>

      </t-card>
      <t-card class="step-card" size="small" title="(2)实施科技示范工程的必要性、总体目标，以及示范后对行业技术创新、管理创新等的促进作用。">
<!--        <div v-html="objData.embodimentSummarize.content"></div>-->
        <inner-html :content="objData.embodimentSummarize.content"></inner-html>

      </t-card>
        </t-col>
      </t-row>
    </t-tab-panel>
    <t-tab-panel :class="[reviewOpen?'tab-full-panel':'tab-panel']"  value="3" label="前期工作和科研基础">
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
      <t-card class="step-card" size="small" title="前期工作和科研基础(包括申报单位前期准备工作、示范工程的配套条件以及科研能力等情况。)">
<!--        <div v-html="objData.embodimentBasis.content"></div>-->
        <inner-html :content="objData.embodimentBasis.content"></inner-html>

      </t-card>
        </t-col>
      </t-row>
    </t-tab-panel>
    <t-tab-panel :class="[reviewOpen?'tab-full-panel':'tab-panel']"  value="4" label="示范技术可行性">
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
      <t-card class="step-card" size="small" title="示范技术可行性(包括示范技术来源、技术特点、技术成熟度、可行性分析等。)">
<!--        <div v-html="objData.embodimentSkill.content"></div>-->
        <inner-html :content="objData?.embodimentSkill?.content"></inner-html>

      </t-card>
        </t-col>
      </t-row>
    </t-tab-panel>
    <t-tab-panel :class="[reviewOpen?'tab-full-panel':'tab-panel']" value="5" label="主要实施内容">
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
      <t-card class="step-card" size="small" title="主要实施内容(包括示范技术实施的内容、方案、规模及组织方式、技术保障措施等,以及在示范过程中需进一步研究的内容。)">
<!--        <div v-html="objData.embodimentContent.content"></div>-->
        <inner-html :content="objData.embodimentContent.content"></inner-html>

      </t-card>
        </t-col>
      </t-row>
    </t-tab-panel>
    <t-tab-panel :class="[reviewOpen?'tab-full-panel':'tab-panel']"  value="6" label="考核指标">
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
      <t-card class="step-card" size="small" title="科技示范工程的具体考核指标及最终提交的成果形式概述">
<!--        <div v-html="objData.embodimentAssess.content"></div>-->
        <inner-html :content="objData.embodimentAssess.content"></inner-html>

      </t-card>
      <t-card class="step-card" size="small" title="最终提交的成果形式">
        <project-approach-expect-results phaseType="2" :projectId="projectId"
                                         ref="project-approach-expect-results"
                                         v-model="objData.embodimentAssess.projectExpectResults"
                                         :editOpen="false"></project-approach-expect-results>
      </t-card>
        </t-col>
      </t-row>
    </t-tab-panel>
    <t-tab-panel :class="[reviewOpen?'tab-full-panel':'tab-panel']" value="7" label="进度安排">
        <project-research-plan  ref="project-research-plan"
                               v-model="objData.projectResearchPlan"
                               :projectId="projectId" :editOpen="false"
                               phaseType="2"></project-research-plan>
    </t-tab-panel>
    <t-tab-panel :class="[reviewOpen?'tab-full-panel':'tab-panel']" value="8" label="承担单位构成及任务分工">
        <project-unit ref="project-unit" v-model="objData.projectCompanyList"
                      :projectId="projectId" :editOpen="false"
                      phaseType="2"></project-unit>
    </t-tab-panel>
    <t-tab-panel :class="[reviewOpen?'tab-full-panel':'tab-panel']" value="9" label="经费预算及资金筹措情况">
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
          <t-card class="step-card" size="small" title="经费预算及资金筹措情况(说明科技示范工程总经费预算、经费来源渠道和金额等。)">
            <!--        <div v-html="objData.embodimentBudget.content"></div>-->
            <inner-html :content="objData.embodimentBudget.content"></inner-html>
          </t-card>
        </t-col>
      </t-row>

    </t-tab-panel>
    <t-tab-panel :class="[reviewOpen?'tab-full-panel':'tab-panel']" value="10" label="经济社会效益评估">
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
          <t-card class="step-card" size="small" title="经济社会效益评估">
            <!--        <div v-html="objData.embodimentEconomy.content"></div>-->
            <inner-html :content="objData.embodimentEconomy.content"></inner-html>

          </t-card>
        </t-col>
      </t-row>

    </t-tab-panel>
    <t-tab-panel :class="[reviewOpen?'tab-full-panel':'tab-panel']" value="11" label="其他需说明的问题">
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
          <t-card class="step-card" size="small" title="其他需说明的问题">
            <!--        <div v-html="objData.embodimentOther.content"></div>-->
            <inner-html :content="objData.embodimentOther.content"></inner-html>

          </t-card>
        </t-col>
      </t-row>

    </t-tab-panel>
    <t-tab-panel :class="[reviewOpen?'tab-full-panel':'tab-panel']" value="12" label="科技示范工程经费来源证明">
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
      <t-card class="step-card" size="small" title="科技示范工程经费来源证明">
        <t-form :colon="true" ref="form" class="step-form"
                labelWidth="120px">
        <t-form-item label="单位全称" name="supportDept">
          {{ objData.projectEmbodimentProve.supportDept}}
        </t-form-item>
        <t-form-item label="支持资金" name="supportBudget">
          {{ objData.projectEmbodimentProve.supportBudget}}万元
        </t-form-item>
        <t-form-item label="资金来源" name="budgetSource">
          <t-radio-group :disabled="true" v-model="objData.projectEmbodimentProve.budgetSource" :options="dict.type.sf_budget_source"></t-radio-group>
        </t-form-item>
        </t-form>
      </t-card>
        </t-col>
      </t-row>
    </t-tab-panel>
    <t-tab-panel :class="[reviewOpen?'tab-full-panel':'tab-panel']" value="13" label="相关附件">
      <t-table v-if="isMyProject" row-key="id" :columns="projectFileColumns" :data="projectFileData">
        <template #id="{row, rowIndex}">
          {{ rowIndex+1 }}
        </template>
        <template #op="{row}">
          <file-upload v-if="['sfprojectSSFA'].includes(row.moduleKey)" @success="uploadSuccess"  tips="限制pdf、图片" accept="application/pdf,image/*" v-model="row.fileIds" :moduleKey="row.moduleKey"
                       :fileList="row.fileLists"
                       :multiple="true">
            <t-button variant="outline">
              <t-icon name="cloud-upload" slot="icon"/>
              点击上传
            </t-button>
          </file-upload>
          <a v-else class="t-button-link" target="_blank" v-for="(item,index) in row.fileLists" :href="item.url" :key="index">
            {{item.name}}
          </a>
        </template>
        <template #c1="{row}">
          <a v-if="row.c3" class="t-button-link" :href="`${file_domain}/${row.c3}`" target="_blank">{{ row.c1 }}</a>
          <div v-else>{{ row.c1 }}</div>
        </template>
      </t-table>
      <t-table v-else row-key="id" :columns="projectFileColumns" :data="projectFileData">
        <template #id="{row, rowIndex}">
          {{ rowIndex+1 }}
        </template>
        <template #c1="{row}">
          <a v-if="row.c3" class="t-button-link" :href="`${file_domain}/${row.c3}`" target="_blank">{{ row.c1 }}</a>
          <div v-else>{{ row.c1 }}</div>
        </template>
        <template  #op="{row}">
          <div v-for="(item,index) in row.fileLists" :key="index">
            <a class="t-button-link" target="_blank" :href="item.url" >
              {{item.name}}
            </a>
          </div>
        </template>
      </t-table>
    </t-tab-panel>


  </t-tabs>
</template>

<script>
import { VITE_FILE_DOMAIN } from '@/api/upload'
import {getFiles} from "@/api/common";
import projectApproachExpectResults from "../../project/components/project-approach-expectResults.vue";
import projectResearchPlan from "../../project/components/project-research-plan.vue";
import projectUnit from "../../project/components/project-unit.vue";
import FileUpload from "@/components/FileUpload/index.vue"
import InnerHtml from "@/components/InnerHtml/index.vue";


export default {
  name: "performance-report-detail",
  dicts: ['sf_budget_source'],
  components:{
    projectApproachExpectResults,
    projectResearchPlan,
    projectUnit,
    FileUpload,
    InnerHtml
  },
  props:{
    projectId: [String,Number],
    reviewOpen: {
      type: Boolean,
      default: false
    },
  },
  data(){
    return {
      site_tag: import.meta.env.VITE_SITE_TAG,
      file_domain: VITE_FILE_DOMAIN,
      isMyProject: false,
      stepValue: '1',
      projectData: {
        projectLeader: ''
      },
      objData: {
        embodimentSummarize: {},
        embodimentBasis: {},
        embodimentSkill: {},
        embodimentContent: {},
        embodimentAssess: {},
        projectResearchPlan: [],
        projectCompanyList: [],
        embodimentBudget: {},
        embodimentEconomy: {},
        embodimentOther: {},
        projectEmbodimentProve: {},
      },
      projectFileData: [
        {
          id: 1,
          c1: "相关附件(包括:依托工程或项目立项审批、核准或备案证明，示范技术的第三方评价证明等。)",
          c2: "是",
          fileIds: [],
          fileLists: [],
          moduleKey: "projectSSXGFJ",
          require: true,
        },
        {
          id: 4,
          c1: "已盖章实施方案",
          c2: "审批通过后，从系统导出PDF线下盖章(申报用户上传)",
          fileIds: [],
          fileLists: [],
          moduleKey: "sfprojectSSFA"
        },
      ],
      projectFileColumns: [
        {
          colKey: "id",
          title: "序号",
          align: "center",
          width: 64
        },
        {
          colKey: "c1",
          title: "附件名称",
          align: "center",
        },

        {
          colKey: "c2",
          title: "是否必需",
          align: "center",
        },
        {
          colKey: "op",
          title: "操作",
          align: "left",
        },
      ],
    }
  },
  watch: {
    projectId: {
      immediate: true,
      handler(val) {
        if (val) {
          this.getObj(val);
        }
      }
    },
  },
  methods:{
    getObj(){
      this.$api.kjsf.implement.projectEmbodimentGetByProjectId(this.projectId).then(response => {
        this.isMyProject = this.$store.state.user.userId === response.data.createUserId;
        Object.assign(this.objData, response.data)
      }).catch((e) => {
        this.$message.error(e.toString());
      });

      getFiles(this.projectId).then((res) => {
        const files = {}
        res.data.forEach((item) => {
          if (!files[item.moduleKey]) {
            files[item.moduleKey] = []
          }
          files[item.moduleKey].push({
            name: item.fileName,
            url: item.fullFilePath,
            id: item.id,
            filePath: item.filePath
          })
        })
        this.projectFileData.forEach((val,index)=>{
          this.projectFileData[index].fileLists = files[val.moduleKey] || [];
          this.projectFileData[index].fileIds = files[val.moduleKey]?.map(val => val.id) || [];
        })
      }).catch((e) => {
        this.$message.error(e.toString());
      });

      this.$api.kjsf.project.get(this.projectId).then(pro => {
        if(pro.data){
          this.projectData = pro.data;
        }
      }).catch(e => {
        this.applyLoading = false;
        this.$message.error(e.toString())
      })
    },
    uploadSuccess(ids){
      this.$api.kjsf.project.update({
        id: this.projectId,
        sysAttMainVo: {
          sysAttMainIds: ids,
        }
      }).then(val => {
        this.$message.success("上传成功");
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
  }
}
</script>

<style lang="less" scoped>
.t-tab-panel{
  padding: 10px;
}
.tab-panel{
  height: calc(65vh - 64px);
  overflow: scroll;
}
.tab-full-panel{
  height: calc(80vh - 64px);
  overflow: scroll;
}
.t-form__item{
  margin-bottom:6px
}

.t-row {
  margin-bottom: 14px;
}

.step-card {
  margin-bottom: 14px;
}
</style>
